<template>
  <page-view>

    <div class="main  h-auto w-full flex flex-wrap justify-center">

      <div class="w-[900px] h-[240px] text-white   mt-[20px] rounded-md border-4 shadow-lg">
        <div class="text-xl text-white">{{ centerInfo.user.nickname }}的个人中心</div>
        <p>{{ centerInfo.user.introduce }}</p>
        <div class="flex">
          <img class="w-[160px] h-[160px] mt-[20px]" :src="centerInfo.user.pic" alt="">
          <el-tabs v-model="activeName" class="demo-tabs ml-[140px] mt-[140px]" @tab-click="handleClick">
            <div class="el-tab-pane">
              <el-tab-pane label="我的分享" name="first">
                <ul>
                  <el-scrollbar height="1200px">
                    <li v-for="i in centerInfo.userShares" :key="i"
                      class="infinite-list-item w-[560px] h-[400px] m-[16px]  border">
                      <div class="flex">
                        <div class="block">
                          <el-avatar :size="50" :src="centerInfo.user.pic" class="mt-[10px]" />
                        </div>
                        <div class="m-[10px] h-[50px]">
                          <h3>{{ centerInfo.user.nickname }}</h3>
                          <p class="font  text-xs text-red-400 mt-[4px]">{{ i.shareTime }}</p>
                        </div>
                      </div>
                      <p class="w-[530px] h-[100px] border-solid border break-all overflow-clip ">
                        {{ i.shareContent }}
                      </p>

                      <div class="demo-image__preview">
                        <el-image style="width: 150px; height: 150px" :src="i.sharePic" :zoom-rate="1.2"
                          :preview-src-list="i.sharePicList" :initial-index="4" fit="cover" />
                      </div>
                      <p class="s text-[10px] font-bold text-red-700">地点:&nbsp;&nbsp;{{ i.shareArea }}</p>
                      <p class="flex text-[10px] font-bold mt-[10px] ml-[380px]">游览次数:{{ i.shareView }} <img
                          src="../../assets/img/well.png" class="h-[20px] w-[20px] ml-[10px] mt-[-4px]" alt="">
                        {{ i.shareAlike }}
                      </p>
                    </li>
                  </el-scrollbar>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="我的留言" name="second">
                <ul>
                  <el-scrollbar height="1200px">
                    <li v-for="i in centerInfo.userMessage" :key="i"
                      class="infinite-list-item w-[560px] h-[400px] m-[16px]  border">
                      <div class="flex">
                        <div class="block">
                          <el-avatar :size="50" :src="centerInfo.user.pic" class="mt-[10px]" />
                        </div>
                        <div class="m-[10px] h-[50px]">
                          <h3>{{ centerInfo.user.nickname }}</h3>
                          <p class="font  text-xs text-red-400 mt-[4px]">{{ i.messageTime }}</p>
                        </div>
                      </div>
                      <div class=" w-[480px]  h-[260px] border-4 m-[40px] bg-pink-200">
                        <div class="flex">
                          <div class="block">
                            <el-avatar :size="50" :src="centerInfo.user.pic" class="mt-[10px]" />
                          </div>
                          <div class="m-[10px] mt-[20px] h-[50px]">
                            <p class="font  text-xs text-red-400 mt-[4px] overflow-clip">{{ i.content }}</p>
                          </div>
                        </div>
                        <div class="flex mt-[100px]">
                          <p v-if="i.messageReply"
                            class="font w-[420px] h-[40px]  text-xs text-red-400 mt-[4px] overflow-clip">
                            {{
                              i.messageReply.replyContent
                            }}
                          </p>
                          <el-avatar :size="50" :src="systemPic" class="" />
                        </div>

                      </div>

                    </li>
                  </el-scrollbar>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="我的订单" name="third">
                <el-tabs v-model="activeName1" type="card" class="demo-tabs" @tab-click="handleClick">
                  <el-tab-pane label="全部" name="first">
                    <ul>
                      <el-scrollbar height="1080px">

                        <li v-for="i in centerInfo.ordersList" :key="i" class="infinite-list-item">
                          <div class="bg-gray-200 w-[570px] m-[10px] text-black mt-[20px]">
                            <div class="header  leading-[40px] overflow-hidden">
                              <div class="flex">
                                <p v-if="i.orderStatus === '0'" style="color: red;">未付款</p>
                                <p v-if="i.orderStatus === '1'" style="color: green;font-size: larger;">已付款</p>
                              </div>
                              <p class="xxx flex-wrap">{{ i.orderPaymentTime }}|{{ centerInfo.user.nickname }}|订单号:{{
                                i.orderId
                              }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单金额:{{ i.orderMoney }}元</p>
                            </div>
                            <div>
                              <ul>
                                <li class="flex" v-for="shopcart in i.shopCarts" :key="shopcart">
                                  <div class="demo-image__preview w-[100px] h-[100px]">
                                    <el-image style="width: 100px; height: 100px" :src="shopcart.good.pic"
                                      :zoom-rate="1.2" :preview-src-list="shopcart.good.picList" :initial-index="4"
                                      fit="cover" />
                                  </div>
                                  <p>{{ shopcart.good.goodName }}
                                  <p>数量:{{ shopcart.commodityNumber }}</p>
                                  </p>
                                </li>
                              </ul>
                              <div class="flex-col leading-10 ml-[450px]">

                                <div>
                                  <el-button type="info" @click="info(i.id)">查看详情</el-button>
                                </div>
                                <el-drawer v-model="drawer" :modal="false" direction="rtl" size="44%" :show-close="false">
                                  <template #header>
                                    <h4>订单详情</h4>
                                  </template>
                                  <template #default>
                                    <div>
                                      <el-descriptions class="margin-top" title="用户信息" :column="2" :size="size" border>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <user />
                                              </el-icon>
                                              用户名
                                            </div>
                                          </template>
                                          {{ centerInfo.user.nickname }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <iphone />
                                              </el-icon>
                                              电话号码
                                            </div>
                                          </template>
                                          {{ centerInfo.user.phone }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <message />
                                              </el-icon>
                                              邮箱
                                            </div>
                                          </template>
                                          {{ centerInfo.user.email }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div v-if="centerInfo.user.sex === '0'" class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <male />
                                              </el-icon>
                                              性别
                                            </div>
                                            <div v-else class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <female />
                                              </el-icon>
                                              性别
                                            </div>
                                          </template>
                                          <el-tag size="small"> {{ centerInfo.user.sex === '0' ? '男' : '女' }}
                                          </el-tag>
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <office-building />
                                              </el-icon>
                                              地址
                                            </div>
                                          </template>
                                          {{ centerInfo.user.area }}
                                        </el-descriptions-item>
                                      </el-descriptions>
                                    </div>
                                    <div>
                                      <el-descriptions class="margin-top" title="订单信息" :column="2" :size="size" border>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <discount />
                                              </el-icon>
                                              订单编号
                                            </div>
                                          </template>
                                          {{ i.orderId }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <tools />
                                              </el-icon>
                                              订单状态
                                            </div>
                                          </template>
                                          <el-tag size="small">{{
                                            i.orderStatus === '0' ? '未支付' : '已支付'
                                          }}</el-tag>
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <PieChart />
                                              </el-icon>
                                              订单提交时间
                                            </div>
                                          </template>
                                          {{ i.orderPurchaseTime }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>

                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <PieChart />
                                              </el-icon>
                                              订单支付时间
                                            </div>
                                          </template>
                                          {{ i.orderPaymentTime }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <Promotion />
                                              </el-icon>
                                              付款方式
                                            </div>
                                          </template>
                                          <el-tag size="small">支付宝</el-tag>
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <User />
                                              </el-icon>
                                              收货人
                                            </div>
                                          </template>
                                          <el-tag size="small">{{ centerInfo.user.userName }}</el-tag>
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <OfficeBuilding />
                                              </el-icon>
                                              收货地址
                                            </div>
                                          </template>
                                          湖北省武汉市华夏理工学院
                                        </el-descriptions-item>
                                      </el-descriptions>
                                    </div>
                                    <div>
                                      <h5 class="font-bold">订单商品列表</h5>
                                      <el-table :data="tableData" border style="width: 100%;margin-top: 20px;">
                                        <el-table-column prop="id" label="商品ID" width="80" />
                                        <el-table-column prop="commodityName" label="商品名" width="180" />
                                        <el-table-column prop="commodityPrice" label="商品单价" width="80" />
                                        <el-table-column prop="commodityNumber" label="数量" />
                                        <el-table-column prop="commoditySubtotal" label="商品小计" width="80" />

                                      </el-table>

                                    </div>
                                  </template>
                                  <template #footer>
                                    <div style="flex: auto">
                                      <el-button @click="cancelClick">cancel</el-button>
                                    </div>
                                  </template>
                                </el-drawer>

                                <el-button type="danger" class="" @click="deleteOrder(i.id)">删除订单</el-button>
                              </div>
                            </div>
                          </div>
                        </li>
                      </el-scrollbar>

                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="未付款" name="second">
                    <ul>
                      <el-scrollbar height="1080px">
                        <li v-show="i.orderStatus == '0'" v-for="i in centerInfo.ordersList" :key="i"
                          class="infinite-list-item">
                          <div class="bg-gray-200 w-[570px] m-[10px] text-black mt-[20px]">
                            <div class="header  leading-[40px] overflow-hidden">
                              <div class="flex">
                                <p v-if="i.orderStatus === '0'" style="color: red;">未付款</p>
                                <p v-if="i.orderStatus === '1'" style="color: green;font-size: larger;">已付款</p>
                              </div>
                              <p class="xxx flex-wrap">{{ i.orderPaymentTime }}|{{ centerInfo.user.nickname }}|订单号:{{
                                i.orderId
                              }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单金额:{{ i.orderMoney }}元</p>
                            </div>
                            <div>
                              <ul>
                                <li class="flex" v-for="shopcart in i.shopCarts" :key="shopcart">
                                  <div class="demo-image__preview w-[100px] h-[100px]">
                                    <el-image style="width: 100px; height: 100px" :src="shopcart.good.pic"
                                      :zoom-rate="1.2" :preview-src-list="shopcart.good.picList" :initial-index="4"
                                      fit="cover" />
                                  </div>
                                  <p>{{ shopcart.good.goodName }}
                                  <p>数量:{{ shopcart.commodityNumber }}</p>
                                  </p>
                                </li>
                              </ul>
                              <div class="flex leading-10 ml-[280px]">
                                <!-- deleteOrder -->
                                <div>
                                  <el-button type="danger" @click="cancleOrder(i.id)">取消订单</el-button>
                                </div>
                                <div>
                                  <el-button class="ml-[10px]" type="danger" @click="onclick(i.orderId)">去支付</el-button>
                                </div>
                                <div>
                                  <el-button class="ml-[10px]" type="info" @click="info(i.id)">查看详情</el-button>
                                </div>
                                <el-drawer v-model="drawer" :modal="false" direction="rtl" size="44%" :show-close="false">
                                  <template #header>
                                    <h4>订单详情</h4>
                                  </template>
                                  <template #default>
                                    <div>
                                      <el-descriptions class="margin-top" title="用户信息" :column="2" :size="size" border>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <user />
                                              </el-icon>
                                              用户名
                                            </div>
                                          </template>
                                          {{ centerInfo.user.nickname }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <iphone />
                                              </el-icon>
                                              电话号码
                                            </div>
                                          </template>
                                          {{ centerInfo.user.phone }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <message />
                                              </el-icon>
                                              邮箱
                                            </div>
                                          </template>
                                          {{ centerInfo.user.email }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div v-if="centerInfo.user.sex === '0'" class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <male />
                                              </el-icon>
                                              性别
                                            </div>
                                            <div v-else class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <female />
                                              </el-icon>
                                              性别
                                            </div>
                                          </template>
                                          <el-tag size="small"> {{ centerInfo.user.sex === '0' ? '男' : '女' }}
                                          </el-tag>
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <office-building />
                                              </el-icon>
                                              地址
                                            </div>
                                          </template>
                                          {{ centerInfo.user.area }}
                                        </el-descriptions-item>
                                      </el-descriptions>
                                    </div>
                                    <div>
                                      <el-descriptions class="margin-top" title="订单信息" :column="2" :size="size" border>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <discount />
                                              </el-icon>
                                              订单编号
                                            </div>
                                          </template>
                                          {{ i.orderId }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <tools />
                                              </el-icon>
                                              订单状态
                                            </div>
                                          </template>
                                          <el-tag size="small">{{
                                            i.orderStatus === '0' ? '未支付' : '已支付'
                                          }}</el-tag>
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <PieChart />
                                              </el-icon>
                                              订单提交时间
                                            </div>
                                          </template>
                                          {{ i.orderPurchaseTime }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>

                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <PieChart />
                                              </el-icon>
                                              订单支付时间
                                            </div>
                                          </template>
                                          {{ i.orderPaymentTime }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <Promotion />
                                              </el-icon>
                                              付款方式
                                            </div>
                                          </template>
                                          <el-tag size="small">支付宝</el-tag>
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <User />
                                              </el-icon>
                                              收货人
                                            </div>
                                          </template>
                                          <el-tag size="small">{{ centerInfo.user.userName }}</el-tag>
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <OfficeBuilding />
                                              </el-icon>
                                              收货地址
                                            </div>
                                          </template>
                                          湖北省武汉市华夏理工学院
                                        </el-descriptions-item>
                                      </el-descriptions>
                                    </div>
                                    <div>
                                      <h5 class="font-bold">订单商品列表</h5>
                                      <el-table :data="tableData" border style="width: 100%;margin-top: 20px;">
                                        <el-table-column prop="id" label="商品ID" width="80" />
                                        <el-table-column prop="commodityName" label="商品名" width="180" />
                                        <el-table-column prop="commodityPrice" label="商品单价" width="80" />
                                        <el-table-column prop="commodityNumber" label="数量" />
                                        <el-table-column prop="commoditySubtotal" label="商品小计" width="80" />

                                      </el-table>

                                    </div>
                                  </template>
                                  <template #footer>
                                    <div style="flex: auto">
                                      <el-button @click="cancelClick">cancel</el-button>
                                    </div>
                                  </template>
                                </el-drawer>
                              </div>
                            </div>
                          </div>
                        </li>
                      </el-scrollbar>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="已付款" name="third">
                    <ul>
                      <el-scrollbar height="1080px">
                        <li v-show="i.orderStatus == '1'" v-for="i in centerInfo.ordersList" :key="i"
                          class="infinite-list-item">
                          <div class="bg-gray-200 w-[570px] m-[10px] text-black mt-[20px]">
                            <div class="header  leading-[40px] overflow-hidden">
                              <div class="flex">
                                <p v-if="i.orderStatus === '0'" style="color: red;">未付款</p>
                                <p v-if="i.orderStatus === '1'" style="color: green;font-size: larger;">已付款</p>
                              </div>
                              <p class="xxx flex-wrap">{{ i.orderPaymentTime }}|{{ centerInfo.user.nickname }}|订单号:{{
                                i.orderId
                              }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单金额:{{ i.orderMoney }}元</p>
                            </div>
                            <div>
                              <ul>
                                <li class="flex" v-for="shopcart in i.shopCarts" :key="shopcart">
                                  <div class="demo-image__preview w-[100px] h-[100px]">
                                    <el-image style="width: 100px; height: 100px" :src="shopcart.good.pic"
                                      :zoom-rate="1.2" :preview-src-list="shopcart.good.picList" :initial-index="4"
                                      fit="cover" />
                                  </div>
                                  <p>{{ shopcart.good.goodName }}
                                  <p>数量:{{ shopcart.commodityNumber }}</p>
                                  </p>
                                </li>
                              </ul>
                              <div class="flex-col leading-10 ml-[450px]">
                                <div>
                                  <el-button type="info" @click="info(i.id)">查看详情</el-button>
                                </div>
                                <el-drawer v-model="drawer" :modal="false" direction="rtl" size="44%" :show-close="false">
                                  <template #header>
                                    <h4>订单详情</h4>
                                  </template>
                                  <template #default>
                                    <div>
                                      <el-descriptions class="margin-top" title="用户信息" :column="2" :size="size" border>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <user />
                                              </el-icon>
                                              用户名
                                            </div>
                                          </template>
                                          {{ centerInfo.user.nickname }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <iphone />
                                              </el-icon>
                                              电话号码
                                            </div>
                                          </template>
                                          {{ centerInfo.user.phone }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <message />
                                              </el-icon>
                                              邮箱
                                            </div>
                                          </template>
                                          {{ centerInfo.user.email }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div v-if="centerInfo.user.sex === '0'" class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <male />
                                              </el-icon>
                                              性别
                                            </div>
                                            <div v-else class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <female />
                                              </el-icon>
                                              性别
                                            </div>
                                          </template>
                                          <el-tag size="small"> {{ centerInfo.user.sex === '0' ? '男' : '女' }}
                                          </el-tag>
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <office-building />
                                              </el-icon>
                                              地址
                                            </div>
                                          </template>
                                          {{ centerInfo.user.area }}
                                        </el-descriptions-item>
                                      </el-descriptions>
                                    </div>
                                    <div>
                                      <el-descriptions class="margin-top" title="订单信息" :column="2" :size="size" border>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <discount />
                                              </el-icon>
                                              订单编号
                                            </div>
                                          </template>
                                          {{ i.orderId }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <tools />
                                              </el-icon>
                                              订单状态
                                            </div>
                                          </template>
                                          <el-tag size="small">{{
                                            i.orderStatus === '0' ? '未支付' : '已支付'
                                          }}</el-tag>
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <PieChart />
                                              </el-icon>
                                              订单提交时间
                                            </div>
                                          </template>
                                          {{ i.orderPurchaseTime }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>

                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <PieChart />
                                              </el-icon>
                                              订单支付时间
                                            </div>
                                          </template>
                                          {{ i.orderPaymentTime }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <Promotion />
                                              </el-icon>
                                              付款方式
                                            </div>
                                          </template>
                                          <el-tag size="small">支付宝</el-tag>
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <User />
                                              </el-icon>
                                              收货人
                                            </div>
                                          </template>
                                          <el-tag size="small">{{ centerInfo.user.userName }}</el-tag>
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <OfficeBuilding />
                                              </el-icon>
                                              收货地址
                                            </div>
                                          </template>
                                          湖北省武汉市华夏理工学院
                                        </el-descriptions-item>
                                      </el-descriptions>
                                    </div>
                                    <div>
                                      <h5 class="font-bold">订单商品列表</h5>
                                      <el-table :data="tableData" border style="width: 100%;margin-top: 20px;">
                                        <el-table-column prop="id" label="商品ID" width="80" />
                                        <el-table-column prop="commodityName" label="商品名" width="180" />
                                        <el-table-column prop="commodityPrice" label="商品单价" width="80" />
                                        <el-table-column prop="commodityNumber" label="数量" />
                                        <el-table-column prop="commoditySubtotal" label="商品小计" width="80" />

                                      </el-table>

                                    </div>
                                  </template>
                                  <template #footer>
                                    <div style="flex: auto">
                                      <el-button @click="cancelClick">cancel</el-button>
                                    </div>
                                  </template>
                                </el-drawer>
                              </div>
                            </div>
                          </div>
                        </li>
                      </el-scrollbar>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="已发货" name="fourth">
                    <ul>
                      <el-scrollbar height="1080px">
                        <li v-show="i.isSend == '1'" v-for="i in centerInfo.ordersList" :key="i"
                          class="infinite-list-item">
                          <div class="bg-gray-200 w-[570px] m-[10px] text-black mt-[20px]">
                            <div class="header  leading-[40px] overflow-hidden">
                              <div class="flex">
                                <p v-if="i.orderStatus === '0'" style="color: red;">未付款</p>
                                <p v-if="i.orderStatus === '1'" style="color: green;font-size: larger;">已付款</p>
                              </div>
                              <p class="xxx flex-wrap">{{ i.orderPaymentTime }}|{{ centerInfo.user.nickname }}|订单号:{{
                                i.orderId
                              }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单金额:{{ i.orderMoney }}元</p>
                            </div>
                            <div>
                              <ul>
                                <li class="flex" v-for="shopcart in i.shopCarts" :key="shopcart">
                                  <div class="demo-image__preview w-[100px] h-[100px]">
                                    <el-image style="width: 100px; height: 100px" :src="shopcart.good.pic"
                                      :zoom-rate="1.2" :preview-src-list="shopcart.good.picList" :initial-index="4"
                                      fit="cover" />
                                  </div>
                                  <p>{{ shopcart.good.goodName }}
                                  <p>数量:{{ shopcart.commodityNumber }}</p>
                                  </p>
                                </li>
                              </ul>
                              <div class="flex-col leading-10 ml-[450px]">
                                <div>
                                  <el-button type="info" @click="info(i.id)">查看详情</el-button>
                                </div>
                                <el-drawer v-model="drawer" :modal="false" direction="rtl" size="44%" :show-close="false">
                                  <template #header>
                                    <h4>订单详情</h4>
                                  </template>
                                  <template #default>
                                    <div>
                                      <el-descriptions class="margin-top" title="用户信息" :column="2" :size="size" border>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <user />
                                              </el-icon>
                                              用户名
                                            </div>
                                          </template>
                                          {{ centerInfo.user.nickname }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <iphone />
                                              </el-icon>
                                              电话号码
                                            </div>
                                          </template>
                                          {{ centerInfo.user.phone }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <message />
                                              </el-icon>
                                              邮箱
                                            </div>
                                          </template>
                                          {{ centerInfo.user.email }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div v-if="centerInfo.user.sex === '0'" class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <male />
                                              </el-icon>
                                              性别
                                            </div>
                                            <div v-else class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <female />
                                              </el-icon>
                                              性别
                                            </div>
                                          </template>
                                          <el-tag size="small"> {{ centerInfo.user.sex === '0' ? '男' : '女' }}
                                          </el-tag>
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <office-building />
                                              </el-icon>
                                              地址
                                            </div>
                                          </template>
                                          {{ centerInfo.user.area }}
                                        </el-descriptions-item>
                                      </el-descriptions>
                                    </div>
                                    <div>
                                      <el-descriptions class="margin-top" title="订单信息" :column="2" :size="size" border>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <discount />
                                              </el-icon>
                                              订单编号
                                            </div>
                                          </template>
                                          {{ i.orderId }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <tools />
                                              </el-icon>
                                              订单状态
                                            </div>
                                          </template>
                                          <el-tag size="small">{{
                                            i.orderStatus === '0' ? '未支付' : '已支付'
                                          }}</el-tag>
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <PieChart />
                                              </el-icon>
                                              订单提交时间
                                            </div>
                                          </template>
                                          {{ i.orderPurchaseTime }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>

                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <PieChart />
                                              </el-icon>
                                              订单支付时间
                                            </div>
                                          </template>
                                          {{ i.orderPaymentTime }}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <Promotion />
                                              </el-icon>
                                              付款方式
                                            </div>
                                          </template>
                                          <el-tag size="small">支付宝</el-tag>
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <User />
                                              </el-icon>
                                              收货人
                                            </div>
                                          </template>
                                          <el-tag size="small">{{ centerInfo.user.userName }}</el-tag>
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                          <template #label>
                                            <div class="cell-item">
                                              <el-icon :style="iconStyle">
                                                <OfficeBuilding />
                                              </el-icon>
                                              收货地址
                                            </div>
                                          </template>
                                          湖北省武汉市华夏理工学院
                                        </el-descriptions-item>
                                      </el-descriptions>
                                    </div>
                                    <div>
                                      <h5 class="font-bold">订单商品列表</h5>
                                      <el-table :data="tableData" border style="width: 100%;margin-top: 20px;">
                                        <el-table-column prop="id" label="商品ID" width="80" />
                                        <el-table-column prop="commodityName" label="商品名" width="180" />
                                        <el-table-column prop="commodityPrice" label="商品单价" width="80" />
                                        <el-table-column prop="commodityNumber" label="数量" />
                                        <el-table-column prop="commoditySubtotal" label="商品小计" width="80" />

                                      </el-table>

                                    </div>
                                  </template>
                                  <template #footer>
                                    <div style="flex: auto">
                                      <el-button @click="cancelClick">cancel</el-button>
                                    </div>
                                  </template>
                                </el-drawer>
                                <div>
                                  <el-button type="info" @click="sendSaleBack(i.orderId)">申请售后</el-button>
                                </div>

                              </div>
                              <div>
                                <el-button v-if="i.isEvoluted === '0'" link type="danger"
                                  @click="openEvalution(i.id)">去评价</el-button>
                                <el-button v-else link type="danger" disabled>已评价</el-button>

                              </div>
                              <el-dialog v-model="dialogFormVisible2" title="评价信息">
                                <el-form :model="evalutionForm">
                                  <el-form-item label="评价内容" :label-width="formLabelWidth">
                                    <el-input v-model="evalutionForm.evalutionContent" autocomplete="off" />
                                  </el-form-item>

                                </el-form>
                                <template #footer>
                                  <span class="dialog-footer">
                                    <el-button @click="dialogFormVisible2 = false">取消</el-button>
                                    <el-button type="primary" @click="submit()">
                                      评价
                                    </el-button>
                                  </span>
                                </template>
                              </el-dialog>
                            </div>
                          </div>
                        </li>
                      </el-scrollbar>
                    </ul>
                  </el-tab-pane>
                </el-tabs>

              </el-tab-pane>
            </div>
          </el-tabs>
        </div>
      </div>
      <div class="flex">
        <div class="w-[260px] h-[730px] rounded-md border-4 shadow-lg ml-[160px]  mt-[20px]">
          <!-- 各分类总数 -->
          <div class="flex w-[230px] h-[100px] border items-center justify-center m-10 bg-white">
            <div
              class="w-[70px] h-[40px] text-center text-userCenterFontColor border border-transparent border-r-gray-200">
              <p>{{ centerInfo.sumsByGroup.userShare }}</p>
              <p>我的分享</p>
            </div>
            <div
              class="w-[70px] h-[40px] text-center text-userCenterFontColor border border-transparent border-r-gray-200">
              <p>{{ centerInfo.sumsByGroup.message }}</p>
              <p>我的留言</p>
            </div>
            <div class="w-[70px] h-[40px] text-center text-userCenterFontColor">
              <p>{{ centerInfo.sumsByGroup.orders }}</p>
              <p>我的订单</p>
            </div>
          </div>
          <!-- 个人信息 -->
          <div class="w-[230px] h-[480px] m-10 bg-white text-gray-700">
            <div class="font-bold h-[32px] divide-x-2 divide-gray-200  border border-transparent border-b-gray-200">
              个人资料
            </div>
            <div class="flex w-[200px] h-[36px] border border-transparent border-b-gray-200 m-[20px]">
              <span class="iconfont icon-username text-[20px]"></span>
              <div class="ml-[10px]">{{ centerInfo.user.userName }}</div>
            </div>
            <div class="flex w-[200px] h-[36px] border border-transparent border-b-gray-200 m-[20px]">
              <span class=" iconfont icon-nicheng text-[20px]"></span>
              <div class="ml-[10px]">{{ centerInfo.user.nickname }}</div>
            </div>
            <div class="flex w-[200px] h-[36px] border border-transparent border-b-gray-200 m-[20px]">
              <span class="iconfont icon-pingjia text-[20px]"></span>
              <div class="ml-[10px]">{{ centerInfo.user.introduce }}</div>
            </div>
            <div class="flex w-[200px] h-[36px] border border-transparent border-b-gray-200 m-[20px]">
              <span class="iconfont icon-shoujihao text-[20px]"></span>
              <div class="ml-[10px]">{{ centerInfo.user.phone }}</div>
            </div>
            <div class="flex w-[200px] h-[36px] border border-transparent border-b-gray-200 m-[20px]">
              <span class="iconfont icon-youxiang text-[20px]"></span>
              <div class="ml-[10px]">{{ centerInfo.user.email }}</div>
            </div>
            <div class="flex w-[200px] h-[36px] border border-transparent border-b-gray-200 m-[20px]">
              <span class="iconfont icon-dizhi text-[20px]"></span>
              <div class="ml-[10px]">{{ centerInfo.user.area }}</div>
            </div>
            <div class="flex w-[200px] h-[36px] border border-transparent border-b-gray-200 m-[20px]">
              <span class="iconfont icon-xingzuo text-[20px]"></span>
              <div class="ml-[10px]">{{ centerInfo.user.constellation }}</div>
            </div>
            <div class="flex w-[200px] h-[36px] border border-transparent border-b-gray-200 m-[20px]">
              <span class="iconfont icon-shengri text-[20px]"></span>
              <div class="ml-[10px]">{{ centerInfo.user.birthday }}</div>
            </div>
          </div>
          <!-- 按钮组 -->
          <div class="m-[18px] mt-[60px]">
            <el-button type="success" @click="dialogFormVisible = true">编辑个人信息</el-button>
            <el-dialog v-model="dialogFormVisible" title="编辑" :append-to-body="true">
              <el-form :model="form">
                <el-form-item label="昵称" :label-width="formLabelWidth">
                  <el-input v-model="form.nickname" autocomplete="off" />
                </el-form-item>
                <el-form-item label="个性签名" :label-width="formLabelWidth">
                  <el-input v-model="form.introduce" type="textarea" autocomplete="off" />
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth">
                  <el-input v-model="form.phone" autocomplete="off" />
                </el-form-item>
                <el-form-item label="地区" :label-width="formLabelWidth">
                  <el-input v-model="form.area" autocomplete="off" />
                </el-form-item>
                <el-form-item label="星座" :label-width="formLabelWidth">
                  <el-select v-model="form.constellation" placeholder="请输入星座" class=" w-[220px]">
                    <el-option v-for="item in constellationList" :key="item" :value="item" />
                  </el-select>
                </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                  <el-button type="primary" @click="editUserInfo">
                    确定
                  </el-button>
                </span>
              </template>
            </el-dialog>
            <el-button type="info" @click="dialogFormVisible1 = true">更新密码</el-button>
            <el-dialog v-model="dialogFormVisible1" title="更新密码" :append-to-body="true">
              <el-form :model="formPassword" :rules="rules" ref="formPasswordEl">
                <el-form-item prop="oldPass" label="请输入原密码" :label-width="formLabelWidth">
                  <el-input v-model="formPassword.oldPass" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item prop="pass" label="请输入新密码" :label-width="formLabelWidth">
                  <el-input v-model="formPassword.pass" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item prop="checkPass" label="请再次输入新密码" :label-width="formLabelWidth">
                  <el-input v-model="formPassword.checkPass" type="password" autocomplete="off" />
                </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogFormVisible1 = false">取消</el-button>
                  <el-button type="primary" @click="updateUserPasswordByself">
                    确定
                  </el-button>
                </span>
              </template>
            </el-dialog>
          </div>
        </div>
        <div class="w-[600px] h-[1200px] rounded-md border-4 shadow-lg m-40 ml-[40px] mt-[60px]">

        </div>

      </div>
      <div class="w-[600px] h-[100px] rounded-md border-4 shadow-lg mt-[-100px] mb-[100px] ml-[300px] ">
        <router-link v-if="activeName === 'first'" :to="{ name: 'Share' }">
          <p class="w-[200px] h-[50px] bg-red-400   rounded-md text-center m-auto mt-20 leading-[50px] font-extrabold">
            前往个人中心</p>
        </router-link>
        <router-link v-if="activeName === 'second'" :to="{ name: 'MessageInfo' }">
          <p class="w-[200px] h-[50px] bg-red-400   rounded-md text-center m-auto mt-20 leading-[50px] font-extrabold">
            前往留言板</p>
        </router-link>
        <router-link v-if="activeName === 'third'" :to="{ name: 'MessageInfo' }">
          <p class="w-[200px] h-[50px] bg-red-400   rounded-md text-center m-auto mt-20 leading-[50px] font-extrabold">
            前往订单中心</p>
        </router-link>
      </div>
    </div>
  </page-view>
</template>
<script   setup>
import { reactive, onMounted, ref, computed } from 'vue';
import { ElNotification, ElMessage, ElLoading, ElMessageBox } from "element-plus";
import API from '../../utils/API';
import { mainStore } from "../../store/index";
import { useRouter, useRoute } from "vue-router";
import {
  Apple, Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  Message,
  Female,
  Male,
  User, Discount,
  Tools,
  Bell,
  Promotion,
  Service,
  PieChart


} from '@element-plus/icons-vue';
const router = useRouter();
const route = useRoute();
const store = mainStore();
let centerInfo = ref({
  ordersList: [
  ],
  sumsByGroup: {},
  user: {},
  userMessage: [],
  userShares: []
});
const systemPic = "https://atguigu-wyp-1311144166.cos.ap-beijing.myqcloud.com/2023/02/10/6efc623f248943ae81706eeda42925f6男性-管理员.png"
let activeName = ref('first')
let activeName1 = ref('first')
let dialogFormVisible = ref(false)
let dialogFormVisible1 = ref(false)
let formLabelWidth = '140px'
let dialogFormVisible2 = ref(false)
const drawer = ref(false)
const size = ref('')
let tableData = ref([]);

const constellationList = [
  "水瓶座", "双鱼座", "白羊座", "金牛座", "双子座", "巨蟹座", "狮子座", "处女座", "天枰座", "天蝎座", "射手座", "魔羯座"
]
let form = ref({
  nickname: '',
  introduce: '',
  phone: '',
  area: '',
  constellation: '',
})
let evalutionForm = ref({
  evalutionOrderId: '',
  evalutionContent: '',

})
const formPassword = ref({
  id: '',
  userName: '',
  oldPass: '',
  pass: '',
  checkPass: ''
})
const getCenterInfo = () => {
  API.CenterInfo.userCenterInfo().then((response) => {
    centerInfo.value = response;
    console.log(centerInfo);
    form.value = response.user;
    formPassword.value.userName = response.user.userName;
    formPassword.value.id = response.user.id;
    console.log("form", form)
    console.log("form", formPassword)

  })
}

const editUserInfo = () => {
  API.CenterInfo.editUserInfo(form.value).then((response) => {
    dialogFormVisible = false;
    //修改个人信息成功提示
    ElNotification({
      title: "提示",
      message: "修改成功",
      type: "success"
    });
    getCenterInfo();
  })
}
//查看订单详情
const info = (id) => {
  drawer.value = true;
  API.CenterInfo.info(id).then(response => {
    tableData.value = response.shopCartList;
    console.log(tableData.value)
  })
}

function cancelClick() {
  drawer.value = false
}

//订单详情描述列表
const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})
const blockMargin = computed(() => {
  const marginMap = {
    large: '32px',
    default: '28px',
    small: '24px',
  }
  return {
    marginTop: marginMap[size.value] || marginMap.default,
  }
})
//去支付
const onclick = (orderId) => {
  API.Shopcart.payOrder(orderId).then(result => {
    let zhifubao = JSON.parse(result);
    document.write(zhifubao)

  })
}

//去评价
const openEvalution = (id) => {
  dialogFormVisible2.value = true
  evalutionForm.value.evalutionOrderId = id;
  console.log(evalutionForm.value)
}
const submit = () => {
  API.CenterInfo.evolutionOrder(evalutionForm.value).then((response) => {
    ElNotification({
      title: "提示",
      message: "评价成功",
      type: "success"
    });
    dialogFormVisible2.value = false;
  })
}

const rules = {
  oldPass: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
  pass: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
  checkPass: [{ required: true, message: '请再次填写新密码', trigger: 'blur' },
  {
    validator: async (rule, value, callback) => {
      if (value === formPassword.value.pass) {
        callback()
      } else {
        callback(new Error("二次输入的密码不一样!请重新输入"));
      }
    }, trigger: "blur"
  }
  ]
}
const formPasswordEl = ref(null);
//用户更新密码
const updateUserPasswordByself = () => {
  formPasswordEl.value.validate(valid => {
    if (valid) {
      console.log("验证成功");
      updatePassword();
    }
    else {
      console.log("验证失败");
      ElMessage.error("请填写内容");
    }
  });
}
const updatePassword = () => {
  API.CenterInfo.updatePass(formPassword.value).then(() => {
    loginOut()
    dialogFormVisible1 = false;

  })
}

//退出登录
const loginOut = () => {
  store.logOut();
  console.log("用户退出登录");
  router.replace({ name: "Login" });
  ElNotification({
    title: "提示",
    message: "修改密码成功！请重新登录",
    type: "warning"
  });
}

const handleClick = () => {

}
const openFullScreen2 = () => {
  var loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  setTimeout(() => {
    loading.close()

  }, 2000)

}
onMounted(() => {
  openFullScreen2()
  getCenterInfo()

})

//支付成功 修改订单状态

const updateOrderStatus = () => {
  let orderSn = route.query.out_trade_no;
  if (orderSn !== null) {
    API.CenterInfo.updateOrderStatus(orderSn).then(response => {
      console.log(response, "修改状态成功!")
    })
  }
}
if (route.query.out_trade_no != null) {
  updateOrderStatus()
}
//取消订单
const cancleOrder = (id) => {
  API.CenterInfo.deleteOrder(id).then(response => {
    ElNotification({
      title: "提示",
      message: "取消订单成功!",
      type: "warning"
    });
    getCenterInfo()

  })
}
//删除订单
const deleteOrder = (id) => {
  API.CenterInfo.deleteOrder(id).then(response => {
    ElNotification({
      title: "提示",
      message: "删除订单成功!",
      type: "warning"
    });
    getCenterInfo()

  })
}
//发送售后信息
const sendSaleBack = (orderId) => {
  ElNotification({
    title: "提示",
    message: "售后信息发送成功!请等待管理员处理！",
    type: "success"
  });
  API.CenterInfo.sendSaleBack(orderId).then(response => {

  })
}
</script>


<style scoped lang="scss">
.main {
  background-image: url('../../assets/img/userCenterBack.png');
  background-size: cover;
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.infinite-list {
  height: 1200px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}

.infinite-list .infinite-list-item+.list-item {
  margin-top: 10px;
}

.el-tab-pane {
  margin-top: 50px;
}


.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

:deep(.el-tabs__item) {
  color: white;

  .is-active {
    color: blue;
  }
}

:deep(.el-overlay) {
  background-color: rgba($color: #000000, $alpha: 0.14);
}

.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>